<script>
    const AvatarModalForm = {
        props: ['dropFiles', 'imgSrc'],
        delimiters: ['{$', '$}'],
        data(){
            return {
                formProps: {
                    dropFiles: this.dropFiles,
                    imgSrc: this.imgSrc
                }
            }
        },
        computed: {
            imgPath(){
                let dropFiles = this.formProps.dropFiles
                // 图片大小配置
                let size = 1024 * 1024 * 2
                if (size < dropFiles.size){
                    this.formProps.dropFiles = null
                    return ''
                }

                let img = new FileReader();
                img.readAsDataURL(dropFiles);
                img.onload = ({ target }) => {
                    this.formProps.imgSrc = target.result; //将img转化为二进制数据
                };
                return this.formProps.imgSrc
            }
        },

        methods:{
            save(){
                const sendData = new FormData()
                sendData.append('avatar', this.formProps.dropFiles)
                sendData.append('phone', '{{ request.user.baykeuserinfo.phone }}')
                sendData.append('balance', '{{ request.user.baykeuserinfo.balance }}')
                sendData.append('nickname', '{{ request.user.baykeuserinfo.nickname }}')
                sendData.append('owner', '{{ request.user.id }}')
                request({
                    method: 'post',
                    url: `{% url "baykeshop:userinfo" %}`,
                    headers: {
                        'Accept': 'application/json',
                        'Content-Type': 'multipart/form-data'
                    },
                    data: sendData
                }).then(res => {
                    if (res.data.code == 'ok') {
                        console.log(res)
                        navbar.toastMessage('is-success', res.data.message)
                        this.$parent.close()
                        location.reload()
                    }else{
                        navbar.toastMessage('is-danger', res.data.message)
                    }
                })
            }
        },
        template: `
        <div class="modal-card" style="width: auto">
            <header class="modal-card-head">
                <p class="modal-card-title">修改头像</p>
                <b-button class="delete" type="is-danger" @click="$parent.close()" />
            </header>
            <section class="modal-card-body" style="overflow:inherit;">
                <b-field>
                    <b-upload v-model="formProps.dropFiles" accept=".jpg, .png, .gif" drag-drop>
                        <section class="section">
                            <div class="is-flex is-flex-direction-column" v-if="formProps.dropFiles">
                                <div class="img-box is-relative">
                                    <button class="delete img-del" @click="formProps.dropFiles = null"></button>
                                    <p class="image is-128x128">
                                        <img :src="imgPath">
                                    </p>
                                </div> 
                            </div>
                            <div class="content has-text-centered" v-else>
                                <p>
                                    <b-icon
                                        icon="upload"
                                        size="is-large1">
                                    </b-icon>
                                </p>
                                <p>建议上传头像大小为128px的正方形图片，仅支持jpg、png及gif三种格式！</p>
                            </div>
                        </section>
                    </b-upload>
                </b-field>
        
            </section>
            <footer class="modal-card-foot">
                <b-button
                    label="取消"
                    @click="$parent.close()" />
                <b-button
                    label="确认"
                    @click="save"
                    type="is-primary" />
            </footer>
        </div>
        `
    }

</script>